<template>
  <s-layout title="登录" :bgStyle="template.style?.background"
            :navbarStyle="template.style?.navbar">
    <view class="lg-main">
      <view class="lg-content">
        <image mode="heightFix" src="@/static/img/lg-icon-1.png"></image>
        <view class="lg-content-t">
          <view class="lg-content-t1">九丝城宇宙</view>
          <view class="lg-content-t2">电动汽车砍价专家</view>
        </view>
        <view class="lg-content-form">
          <view class="lg-content-form-title">登录</view>
          <view class="lg-content-form-item">
            <my-input
              placeholder="请输入手机号"
              v-model="state.model.account"
              :placeholderStyle="placeholderStyle"
              :inputBorder="false"
            >
            </my-input>
          </view>

          <view class="lg-content-form-item">
            <my-input
              placeholder="请输入密码"
              type="password"
              v-model="state.model.password"
              :placeholderStyle="placeholderStyle"
              :inputBorder="false"
            >
            </my-input>
          </view>

          <view class="lg-content-form-enter ss-flex ss-row-between">
            <view @click="sheep.$router.go('/pages/index/register')">立即注册</view>
            <view @click="sheep.$router.go('/pages/index/forget')">忘记密码？</view>
          </view>
          <my-btn class="lg-content-form-btn" block @click.stop="accountLoginSubmit">立即登录</my-btn>

          <view class="lg-content-form-read ss-flex ss-row-center">
            <view class="cicle ss-flex ss-row-center" @click="handleAgree">
              <view class="cicle-active" v-if="state.model.agree"></view>
            </view>
            <view>
              <text @click="handleAgree">点击注册或登录即表示您同意</text>
              <text class="text-active" @tap.stop="onProtocol(appInfo.user_protocol.id, appInfo.user_protocol.title)">
                《{{ appInfo.user_protocol.title }}》
              </text>
            </view>
          </view>
        </view>
      </view>
    </view>

  </s-layout>
  <!-- 空登陆页 -->
</template>

<script setup>
  import { computed, reactive } from 'vue';
  import sheep from '@/sheep';
  import MyBtn from '@/pages/components/my-btn.vue';
  import { closeAuthModal } from '@/sheep/hooks/useModal';
  import SLayout from '@/sheep/components/s-layout/s-layout.vue';

  const appInfo = computed(() => sheep.$store('app').info);
  const template = computed(() => sheep.$store('app').template?.home);

  const placeholderStyle = {
    'color': '#FFF',
    'font-size': '30rpx',
  };
  const state = reactive({
    model: {
      account: '', // 账号
      password: '', // 密码
      agree: false, // 是否同意
    },
  });
  //用户协议
  const handleAgree = () => {
    state.model.agree = !state.model.agree;
  };

  // 查看协议
  function onProtocol(id, title) {
    closeAuthModal();
    sheep.$router.go('/pages/public/richtext', {
      id,
      title,
    });
  }

  // 1.账号登录
  async function accountLoginSubmit() {
    if (!state.model.account) {
      sheep.$helper.toast('请输入手机号');
      return;
    }
    if (!state.model.password) {
      sheep.$helper.toast('请输入密码');
      return;
    }

    // 同意协议
    if (!state.model.agree) {
      sheep.$helper.toast('请勾选同意');
      return;
    }

    // 提交数据
    sheep.$api.user.accountLogin(state.model).then((res) => {
      if (res.code === 1) {
        sheep.$helper.toast('登录成功');
        sheep.$router.go('/pages/index/index');
        // closeAuthModal();
      }
    });
  }
</script>

<style lang="scss" scoped>
  .lg-main {
    background: #000;

    .lg-content {
      height: calc(100vh - 44px);
      overflow-y: scroll;
      background: url('@/static/img/lg-icon-2.png') bottom center no-repeat;
      background-size: 100% auto;
      padding: 0 40rpx;
      overflow-x: hidden;

      .lg-content-t {
        position: relative;
        margin-top: -300rpx;

        .lg-content-t1 {

          font-weight: 300;
          font-size: 70rpx;
          color: #FFFFFF;
        }

        .lg-content-t2 {
          margin-top: 30rpx;

          font-weight: 300;
          font-size: 40rpx;
          color: #FFFFFF;
        }
      }

      .lg-content-form {
        background: #000000;
        border-radius: 30rpx;
        border: 2px solid #595959;
        position: relative;
        margin: 60rpx 0;
        padding: 60rpx 40rpx;

        .lg-content-form-title {
          text-align: center;

          font-weight: 400;
          font-size: 42rpx;
          color: #FFFFFF;
        }

        .lg-content-form-item {
          background: #1C1C1C;
          border-radius: 50rpx;
          padding: 15rpx 40rpx;
          margin-top: 40rpx;
        }

        .lg-content-form-enter {
          margin-top: 40rpx;

          font-weight: 300;
          font-size: 30rpx;
          color: #FFFFFF;
        }

        .lg-content-form-btn {
          margin-top: 60rpx;
        }

        .lg-content-form-read {
          margin-top: 40rpx;

          .cicle {
            width: 28rpx;
            height: 28rpx;
            border-radius: 50%;
            border: 2px solid #1DB481;
            margin-right: 10rpx;
          }

          .cicle-active {
            width: 16rpx;
            height: 16rpx;
            background: #1DB481;
            border-radius: 50%;
          }

          .text-active {
            color: #00A1FF;
          }

          font-weight: 400;
          font-size: 26rpx;
          color: #FFFFFF;
        }
      }
    }
  }
</style>
